<template>
  <div>
    <h4>路由组件的离开守卫</h4>
    <pre>
组件中定义 beforeRouteLeave 为当前路由组件的离开守卫;
当该组件在路由切换中,由显示转为关闭时,会自动触发;
如果想要在执行完路由守卫之后,保持原始的路由切换功能,必须为守卫提供明确的后续操作描述;
    </pre>
    <p>等待支付({{ num }})</p>
    <input type="number" v-model.number="num" />
    <input type="button" value="返回上级路由" @click="$router.back()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      timer: null,
    };
  },
  created() {
    this.timer = setInterval(() => {
      console.log("CompoentLeaveView的计时器");
    }, 1000);
  },
  beforeRouteLeave: function (to, from, next) {
    console.log("src/views/route/CompoentLeaveView.vue 准备关闭");
    console.log("to", to);
    console.log("from", from);
    console.log("next", next);
    console.log("src/views/route/CompoentLeaveView.vue 准备关闭");

    if (this.num > 0) {
      // 要么放行,继续执行后续的路由切换操作
      // next();
      next(true);
      clearInterval(this.timer);
    } else {
      let flag = confirm("是否取消付款");
      if (flag) {
        // 用户取消了支付
        next(true);
        clearInterval(this.timer);
      } else {
        // 要么阻止,不允许执行后续的路由切换操作
        // 用户需要继续支付
        next(false);
      }
    }
  },
};
</script>
